<template>
	<view>
		<view class="infoView flex-row-space-between">
			<view class="flex-row-flex-start">
				<image class="header" src="/static/index/index.png" mode="aspectFill"></image>
				<view class="">
					<view class="flex-row-flex-start">
						<view class="name">
							李小华
						</view>
						<view class="identity flex-row-center">
							供应商
						</view>
					</view>
					<view class="flex-row-flex-start" style="margin-top: 20rpx;">
						<view class="phone">
							13154898248
						</view>
						<uni-icons type="checkbox-filled" size="16" color=" #34C759"></uni-icons>
						<!-- <view @click="toUrl('certification/enterprise')" class="certification ">
							企业认证
						</view> -->
						<view @click="toUrl('/pages/my/certification/certification')" class="certification ">
							未认证
							
						</view>
						<!-- <view class="certification ">
							已认证
						</view> -->
					</view>
				</view>
			</view>
			<view @click="toUrl('identity/identity')" class="switchButton flex-row-center">
				切换
				<image class="switchImage" src="/static/index/index.png" mode=""></image>
			</view>
		</view>

		<view class="teamView">
			<view class="flex-row-space-between">
				<view class="teamTitle">
					我的团队
				</view>
				<view @click="toUrl('share/share')" class="shareButton flex-row-center">
					邀请注册
				</view>
			</view>
			<view class="flex-row-center" style="margin-top: 40rpx;">
				<view class="balanceView">

					<view class="balanceTitle">
						佣金余额
						<uni-icons type="right" size="10" color="#fff"></uni-icons>
					</view>
					<view class="balance flex-row-flex-start">
						<view style="margin-top: 4rpx;font-size: 24rpx;margin-right: 6rpx;">￥</view>
						0
					</view>
				</view>
				<view class="line">

				</view>
				<view class="balanceView" style="margin-left: 30rpx;">

					<view class="balanceTitle">
						团队成员
						<uni-icons type="right" size="10" color="#fff"></uni-icons>
					</view>
					<view class="flex-row-flex-start">
						<view class="balance flex-row-flex-start">

							10
							<view style="margin-top: 4rpx;font-size: 24rpx;margin-left: 6rpx;">人</view>
						</view>
						<view @click="toUrl('member/member')" class="detailButton flex-row-center">
							成员明细
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="itemView">

			<view v-for="(item,index) in list" :key="index">
				<view v-if="index" class="itemLine">

				</view>
				<view @click="itemClick(item)" class="item flex-row-space-between" :key="index">
					<view class="itemName flex-row-center">
						<image class="itemImage" src="/static/index/index.png" mode=""></image>
						{{item.name}}
					</view>
					<uni-icons type="right" size="14" color="#7B7B7B"></uni-icons>
				</view>
			</view>
		</view>

		<view class="fixed-bottom" style="margin-bottom: 120rpx;">
			<view @click="quitButtonClick()" class="quitButton flex-row-center"style="margin-bottom: 0rpx;">
				退出登录
			</view>
		</view>

		<u-tabbar :value="value"  :fixed="true" :placeholder="true">
			<u-tabbar-item text="管理" icon="home" @click="tabbarClick"></u-tabbar-item>
			<u-tabbar-item text="供应商" icon="play-right" @click="tabbarClick"></u-tabbar-item>
			<u-tabbar-item text="我的" icon="account" @click="tabbarClick"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		forum_list,
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				value: 2,
				list: [{
						name: '消息通知',
						icon: '/static/my/1.png',
						value: '',
						url: 'message/message'
					},
					{
						name: '我的保险',
						icon: '/static/my/2.png',
						value: '',
						url: 'insurance/insurance'
					},
					{
						name: '发薪记录',
						icon: '/static/my/2.png',
						value: '',
						url: 'salaryRecord/salaryRecord'
					},
					{
						name: '报名记录',
						icon: '/static/my/3.png',
						value: '',
						url: 'registrationRecord/registrationRecord'
					},
					{
						name: '个人资料',
						icon: '/static/my/4.png',
						value: '',
						url: 'profile/profile'
					},
					{
						name: '电子合同',
						icon: '/static/my/2.png',
						value: '',
						url: 'contract/contract'
					},
					{
						name: '离职申请',
						icon: '/static/my/3.png',
						value: '',
						url: 'resignation/resignation'
					},
					{
						name: '企业管理',
						icon: '/static/my/3.png',
						value: '',
						url: '/pages/workbench/businessManagement/businessManagement'
					},
					{
						name: '团队管理',
						icon: '/static/my/3.png',
						value: '',
						url: '/pages/workbench/supplierBill/supplierBill?type=3'
					},
					{
						name: '设置',
						icon: '/static/my/5.png',
						value: '',
						url: 'info'
					},

				],
				items: ['商品订单', '助理订单'],
				current: 0,
				backgroundColor: "#ffffff00",

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),

		},
		onShow() {
			// this.baseColor = uni.getStorageSync('baseColor')
		},
		onLoad(e) {
			// this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#FBF9FF"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		methods: {
			...mapActions(["changeBaseColor"]),
			tabbarClick(e) {
				console.log('tabbarClick', e);
				// this.value=e
				if(e==0){
					uni.reLaunch({
						url:'/pages/workbench/workbench'
					})
				}
				if(e==1){
					uni.reLaunch({
						url:'/pages/dispatch/dispatch'
					})
				}
			},
			quitButtonClick() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			itemClick(item) {
				console.log(item.url)
				this.toUrl(item.url)
			},
			//跳转
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},	
		}
	}
</script>

<style lang="scss">
	page{
		padding-bottom: 250rpx;
	}
	.infoView {
		margin: 44rpx;
	}

	.header {
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: 136rpx;
		height: 136rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}

	.name {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
	}

	.identity {
		margin-left: 10rpx;
		padding: 0 10rpx;
		height: 24rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1px solid #0057FF;
		font-weight: bold;
		font-size: 18rpx;
		color: #0057FF;
	}

	.phone {
		margin-right: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}

	.certification {
		margin-left: 6rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #34C759;
	}

	.switchButton {
		padding: 0 20rpx;
		height: 48rpx;
		background: linear-gradient(140deg, #8CB3FD 0%, #3F81FF 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.switchImage {
		margin-left: 8rpx;
		width: 28rpx;
		height: 24rpx;
	}

	.teamView {
		padding: 30rpx;
		margin: 30rpx;
		// height: 250rpx;
		background: linear-gradient(140deg, #8CB3FD 0%, #3F81FF 100%);
		border-radius: 16rpx;
	}

	.teamTitle {
		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.shareButton {
		font-weight: bold;
		font-size: 24rpx;
		color: #838488;
		width: 137rpx;
		height: 46rpx;
		background: linear-gradient(226deg, rgba(196, 193, 193, 0.91) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(222, 215, 215, 0.92) 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
	}

	.balanceView {
		width: 50%;
	}

	.balanceTitle {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.balance {
		margin-top: 20rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: rgba(255, 255, 255, 0.8);
	}

	.line {
		width: 1px;
		height: 65rpx;
		background-color: #fff;
	}

	.detailButton {
		margin-top: 10rpx;
		margin-left: 14rpx;
		width: 129rpx;
		height: 48rpx;
		background: #005BE2;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.itemView {
		margin: 30rpx;
		padding: 10rpx 40rpx;
		background: #FFFFFF;
		box-shadow: inset 0rpx 0rpx 26rpx 14rpx rgba(255, 255, 255, 0.3);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.item {
		height: 84rpx;
	}

	.itemImage {
		margin-right: 16rpx;
		width: 44rpx;
		height: 44rpx;
	}

	.itemName {
		font-weight: 400;
		font-size: 28rpx;
		color: #232323;
	}

	.itemLine {
		height: 1px;
		background-color: #EEEEEE;
	}

	.quitButton {
		margin: 30rpx;
		margin-bottom: 130rpx;
		height: 80rpx;
		background: linear-gradient(141deg, #8CB3FD 0%, #3F81FF 100%);
		border-radius: 104rpx 104rpx 104rpx 104rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>